<template>
  <div>
<!--    v-model双向数据绑定 可以省略value设置-->
    <input type="text" v-model="msg">
    <br/>
    {{msg}}
    <br/>
<!--    v-model不采用 而是想双向数据绑定的方法-->
    <input type="text" :value="msg" @input="inchage"><br/>
    {{msg}}
    <br/>
<!--    v-model的修饰符号：
    .lazy 懒加载修饰符  回车后才会数据同步
    .number 修饰符让其转换为 number 类型  只能输入数字
    ·.trim修饰符可以自动过滤掉输入框的首尾空格

-->
    <input type="text" v-model.lazy="xsf"><br/>
    <input type="number" v-model="xsf"><br/>
    <input type="text" v-model.trim="xsf"><br/>
    {{xsf}}
    <br/>
<!--    单选框 可以省略name-->
    性别：
    <lable for="one">
        <input type="radio" id="one"  v-model="sex" value="男">男
    </lable>
    <lable for="two">
        <input type="radio" id="two"  v-model="sex" value="女">女
    </lable>
      <br/>
    {{sex}}
    <br/>
<!--    复选框 -->
    爱好：
    <lable for="a">
      <input type="checkbox" id="a"  v-model="hobby" value="篮球">篮球
    </lable>
    <lable for="b">
      <input type="checkbox" id="b"  v-model="hobby" value="足球">足球
    </lable>
    <lable for="c">
      <input type="checkbox" id="c"  v-model="hobby" value="乒乓球">乒乓球
    </lable>
    <lable for="d">
      <input type="checkbox" id="d"  v-model="hobby" value="排球">排球
    </lable>
    <br/>
    {{ hobby }}
    <br/>
<!--    下拉框 单选-->
    <select v-model="city">
      <option value="深圳">深圳</option>
      <option value="广州">广州</option>
      <option value="惠州">惠州</option>
    </select>
    <br/>
    {{ city }}
    <br/>
    <br/>
    <!--    下拉框 多选-->
    <select v-model="citys" multiple>
      <option value="深圳">深圳</option>
      <option value="广州">广州</option>
      <option value="惠州">惠州</option>
    </select>
    <br/>
    {{ citys }}
  </div>
</template>

<script>

export default {
  name: "App",
  data(){
    return{
      msg:'v-model双向数据绑定',
      xsf:'修饰符',
      sex:'男',//代替checked
      hobby:[],
      city:'深圳',//代替selected
      citys:''
    }
  },
  methods:{
    inchage(event){
      // console.log(event.target.value);
      this.msg = event.target.value
    }
  }
}
</script>

<style scoped>

</style>